<template>
    <div class="comment-box">
        <h3>我是评论</h3>
        <hr>
        <textarea placeholder="请输入评论的内容" v-model="msg" @keyup.enter="postComment"></textarea>
        <mt-button type="primary" size="large" @click="postComment">提交评论</mt-button>
        <div class="list">
            <div class="item" v-for="(item, i) in contentList" :key="i">
                <div class="index-name">第 {{i+1}} 楼: {{item.user_name}}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}</div>
                <div class="item-content">{{item.content != 'undefined' ? item.content : '你没有评论'}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="addMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data(){
        return {
            contentList:[],
            pageindex:1,    
            msg: "" // 评论输入的内容
        }
    },
    props: ["id"],
    created(){
        this.getContentList();
    },
    methods:{
        getContentList(){
            this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex).then(result=>{
                this.contentList = this.contentList.concat(result.body.message);
            })
        },
        addMore(){
            this.pageindex++;
            this.getContentList();
        },
        postComment(){
            //校验msg是否为空
            if(this.msg.trim().length === 0){
                return Toast("评论内容不能为空")
            }
            this.$http.post("api/postcomment/"+this.id,{conten:this.msg.trim()})
            .then(reult=>{
                var cmt = {user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()};
                this.contentList.unshift(cmt);
                this.msg =''
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .comment-box{
        h3{
            font-size: 14px;
            text-align: left;
        }
        textarea{
            font-size: 12px;
            margin-bottom: 3px;
        }
        .item{
            font-size: 13px;
            .index-name{
                background-color: #ccc;
                height: 30px;
                line-height: 30px;
                margin: 3px 0;
            }
            .item-content{
                text-indent: 2em;
                height: 30px;
                line-height: 30px;
            }
        }
    }
</style>